<template>
  <div class="order">
    <!-- 订单管理 -->
    <!-- 标签页开始 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="first"></el-tab-pane>
      <el-tab-pane label="待支付" name="second"></el-tab-pane>
      <el-tab-pane label="待派单" name="third"></el-tab-pane>
      <el-tab-pane label="待接单" name="fourth"></el-tab-pane>
      <el-tab-pane label="待服务" name="five"></el-tab-pane>
      <el-tab-pane label="待确认" name="six"></el-tab-pane>
      <el-tab-pane label="已完成" name="seven"></el-tab-pane>
    </el-tabs>
    <!-- 标签页结束 -->
    <!-- 表格开始 -->
    <el-table
      :data="orders"
      stripe
      style="width: 98%; margin: 0 auto"
      size="small"
    >
      <el-table-column prop="id" label="订单编号" width="80" align="center">
      </el-table-column>
      <el-table-column label="下单时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.orderTime | fmtTime }}
        </template>
      </el-table-column>
      <el-table-column prop="total" label="总价" align="center">
        <template slot-scope="scope">
          <div>
            ￥<span style="color: #ed1941; font-size: 18px">{{
              scope.row.total
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            v-if="scope.row.status === '待接单'"
            type="success"
            >{{ scope.row.status }}</el-tag
          >
          <el-tag
            size="mini"
            v-if="scope.row.status === '待派单'"
            type="warning"
            >{{ scope.row.status }}</el-tag
          >
          <el-tag
            size="mini"
            v-if="scope.row.status === '已完成'"
            type="primary"
            >{{ scope.row.status }}</el-tag
          >
          <el-tag
            size="mini"
            v-if="scope.row.status === '待服务'"
            type="info"
            >{{ scope.row.status }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="customerId" label="顾客ID" align="center">
      </el-table-column>
      <el-table-column label="员工ID" align="center">
        <template slot-scope="scope" align="center">
          <p v-if="scope.row.employeeId">{{ scope.row.employeeId }}</p>
          <p v-else>--</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <el-button size="mini" type="primary">详情</el-button>
        <el-button size="mini" type="warning">派单</el-button>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class="block" style="float:right;margin:40px 30px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="list.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      activeName: "first",
      list: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    ...mapState("order", ["orders", "total"]),
  },
  methods: {
    ...mapActions("order", ["findAllOrders"]),
    handleClick() {
      // console.log(this.activeName);
      switch (this.activeName) {
        case "first":
          this.list.status = null;
          this.findAllOrders(this.list);
          break;
        case "second":
          this.list.status = "待支付";
          // console.log(this.list);
          this.findAllOrders(this.list);
          break;
        case "third":
          this.list.status = "待派单";
          // console.log(this.list);
          this.findAllOrders(this.list);
          break;
        case "fourth":
          this.list.status = "待接单";
          // console.log(this.list);
          this.findAllOrders(this.list);
          break;
        case "five":
          this.list.status = "待服务";
          // console.log(this.list);
          this.findAllOrders(this.list);
          break;
        case "six":
          this.list.status = "待确认";
          // console.log(this.list);
          this.findAllOrders(this.list);
          break;
        case "seven":
          this.list.status = "已完成";
          // console.log(this.list);
          this.findAllOrders(this.list);
          break;
        default:
          this.findAllOrders(this.list);
          break;
      }
    },
    handleSizeChange(pageSize){
      this.list.pageSize = pageSize
      this.findAllOrders(this.list)
    },
		handleCurrentChange(page){
			this.list.page = page
			this.findAllOrders(this.list)
		},
  },
  created() {
    this.findAllOrders(this.list);
    // console.log(this.total);
  },
};
</script>

<style scoped lang="scss">
.order {
  padding: 10px 10px;
  // border: 5px solid #1b315e;
}
</style>